<template>
  <el-card shadow="never">
    <el-collapse v-model="active" v-if="listData.length">
      <el-collapse-item v-for="(item,index) in listData" :key="index" :name="index">
        <template slot="title">
          <span>{{ '事件'+ (index + 1) }}</span>
        </template>
        <el-form :model="form" label-width="100px">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="事件描述:">
                <span>{{ mdl.evalItemName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="考核标准:">
                <span>{{ mdl.standard }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="奖惩类型:">
                <el-radio-group v-model="item.rewardOrientation">
                  <el-radio :label="1" :disabled="true">加分</el-radio>
                  <el-radio :label="2" :disabled="true">减分</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="奖惩值:">
                <span>{{ item.rewardValue }}</span>
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item label="事件照片">
                <template v-if="item.savePath && item.savePath.length > 0">
                  <img
                    style="cursor: pointer"
                    @click="handlePreview(ite)"
                    class="mr20"
                    v-for="ite in item.savePath"
                    :key="ite"
                    :src="ite"
                    width="200"
                  />
                </template>
                <template v-else>无照片</template>
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item label="责任追加:">
                <e-table
                  ref="eTable"
                  :tableData="item.evalEventExtradutyList"
                  :columns="columns"
                  :loading="loading"
                  :pageObj="null"
                  :total="total"
                >
                  <el-table-column slot="targetMode" label="责任对象" align="center">
                    <template slot-scope="scope">{{ scope.row.targetMode === 1 ? '科室' : '个人' }}</template>
                  </el-table-column>
                </e-table>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-collapse-item>
    </el-collapse>
    <template v-else>
      <empty-comp />
    </template>
    <preview-modal ref="previewModal" />
  </el-card>
</template>

<script>
import { openNotification, getSession, setSession, removeSession } from '@/utils/util'
import { eventDelete, queryHistory } from '@/api/eval'
import PreviewModal from '@/components/PreviewModal'

export default {
  components: {
    PreviewModal
  },
  data() {
    return {
      active: ['1'],
      collapseData: [{ title: '事件1' }, { title: '事件2' }, { title: '事件3' }],
      loading: false,
      // 表头
      columns: [
        { slot: 'targetMode' },
        {
          label: '对象名称',
          prop: 'targetName'
        },
        {
          label: '扣分/钱',
          prop: 'rewardValue'
        },
        {
          label: '说明',
          prop: 'remark'
        }
      ],
      tableData: [],
      total: 1,
      form: {},
      mdl: this.$route.params.item || getSession('TestDetailItem'),
      listData: [],
      planObj: getSession('startTestRow'), // 表格传递过来的对象参数
      listRow: getSession('evalListRow') // 我的考评任务列表的对象参数
    }
  },
  async mounted() {
    console.log('planObj', this.planObj)
    const { evalDetailedId, evalItemId } = this.mdl
    const { planTargetId } = this.planObj
    const { startDate, endDate } = this.listRow
    const res = await queryHistory({ evalDetailedId, evalItemId, planTargetId, startDate, endDate })
    console.log('res', res)
    this.listData = [...res.data]
  },
  created() {
    // 列表点击新增传递过来的对象
    if (this.$route.params !== '{}') {
      setSession('TestDetailItem', this.$route.params.item)
    }
    console.log('item', this.mdl)
  },
  methods: {
    handlePreview(item) {
      console.log('item', item)

      this.$refs.previewModal.show([item])
    }
  }
}
</script>

<style scoped>
.el-form-item {
  margin-bottom: 10px;
}
</style>